<template>
  <div style="font-size: 12px">

    <el-button type="success" size="small" @click="toadd">添加</el-button>
    <el-tree :props="treeProps"
             :data="menus"
             show-checkbox
             node-key="id"
             ref="tree"
             default-expand-all
             :expand-on-click-node="false">
      <div slot-scope="{ node, data }" style="display: flex;justify-content: flex-start">

        <template v-if="data.type == '0'">
          <div style="width:120px">{{data.name}}</div>
          <div style="width: 80px">
            <el-tag type="success" size="mini"> 目录</el-tag>

          </div>
        </template>
        <template v-else-if="data.type == '1'">
          <div style="width:100px">{{data.name}}</div>
          <div style="width: 80px">
            <el-tag type="warning" size="mini">菜单</el-tag>
          </div>
        </template>
        <template v-else>
          <div style="width:80px">{{data.name}}</div>
          <div style="width: 80px">
            <el-tag type="danger" size="mini">按钮</el-tag>
          </div>
        </template>

        <div style="width: 80px">
          <i :class="['iconfont',data.icon]"></i>
        </div>

        <div style="width: 100px">
          {{data.parentname}}
        </div>
        <div style="width: 100px">
          {{data.url}}
        </div>
        <div style="width: 100px">
          {{data.perms}}
        </div>
        <div>
          <el-button size="mini" type="warning" @click="edit(data,node)">编辑</el-button>
        </div>
      </div>

    </el-tree>


    <el-dialog :title="title" :visible.sync="formVisiable" :close-on-click-modal="false" width="500px">
      <el-form :model="editmenu" size="small">
        <div>
          <el-radio v-model="editmenu.type" @change="changetab('Folder')" :label="0">目录</el-radio>
          <el-radio v-model="editmenu.type" @change="changetab('MenuDetail')" :label="1">菜单</el-radio>
          <el-radio v-model="editmenu.type" @change="changetab('Button')" :label="2">按钮</el-radio>
        </div>
        <div>
          <router-view>

          </router-view>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisiable = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import axios from "axios"
  import qs from "qs"
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";

  import {deepCopy} from "../../js/common.js"


  export default {
    components: {ElButton},
    mounted() {
      this.loaddata();
    },


    data() {
      return {
        title: "",
        form: {},
        formVisiable: false,
        menus: [],
        treeProps: {
          children: 'children',
          label: 'name'
        },
        editmenu: {},
        parentmenus: [],
        parentids: []
      }
    },
    methods: {

      loaddata(){
        //获取所有的菜单
        var that = this;
        axios.get("/sys/menu/all").then(res => {
          that.menus = res.data
          that.parentmenus = that.getParentMenus(that.menus);
          that.editmenu = that.parentmenus[0];
        })
      },
      getParentMenus(currobj) {
        if (typeof currobj !== 'object') {
          return currobj;
        }
        if (currobj instanceof Array) {
          var newobj = [];
        } else {
          var newobj = {}
        }
        for (var key in currobj) {
          if (key == "children" && currobj['type'] == 1) {

          } else {
            if (typeof currobj[key] !== 'object') {
              // 不是引用类型，则复制值
              newobj[key] = currobj[key];
            } else {
              // 引用类型，则递归遍历复制对象
              newobj[key] = this.getParentMenus(currobj[key])
            }
          }
        }
        return newobj
      },

      save() {
        this.formVisiable = false;
        console.log(this.editmenu)
        var that = this;
        axios.post("/sys/menu", qs.stringify(this.editmenu)).then(res => {
          var type = (res.data.code == "200") ? "success" : "warning";
          that.$message({
            type: type,
            message: res.data.message
          })
          if(res.data.code == "200")
            that.loaddata();
        })
      },

      toadd() {
        this.formVisiable = true;
        this.editmenu = {};
        this.parentids.splice(0, this.parentids.length);
        var routers = ["Folder", "MenuDetail", "Button"];
        this.changetab(routers[2])
        this.changetab(routers[1])
      },
      //打开编辑窗口
      edit(data, node) {
        this.formVisiable = true;
        this.editmenu = deepCopy(data)
        delete  this.editmenu.children;
        this.parentids.splice(0, this.parentids.length); //清空
        this.findParentIds(node);
        this.parentids.reverse();

        var routers = ["Folder", "MenuDetail", "Button"];

        //先去别的页签，再到自己的页签，否则数据保留的是上次的
        this.changetab(routers[(data.type + 1) % 3])
        this.changetab(routers[data.type])

      },

      //找到父节点
      findParentIds(node) {
        if (node.parent && !(node.parent.data instanceof Array)) {
          var id = node.parent.data.id;
          this.parentids.push(id);
          this.findParentIds(node.parent);
        }
      },

      changetab(routername) {

        this.$router.push(
          {
            name: routername,
            params: {
              menu: this.editmenu,
              menus: this.parentmenus,
              parentids: this.parentids
            }
          }
        );
      }
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
